<template>
  <div class="progressBarBody">
    <div class="progressBarBodyTitle">
      <div class="progressBarBodyTitlel">{{ item.name }}</div>
      <div class="progressBarBodyTitler"><span>{{ item.value===0 ?'暂无数据':item.value }}</span></div>
    </div>
    <div class="progressBar" :style="{background: item.color2}">
      <div class="progressBarInner"
           :style="{background: item.color1}"
           ref="progressBarInner"></div>
    </div>
  </div>
</template>

<script>
import gsap from 'gsap'

export default {
  name: 'progressBarBody',
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    },
    total: {
      type: Number,
      default () {
        return 0
      }
    }
  },
  data () {
    return {}
  },
  computed: {
    // (this.item.value / this.total).toFixed(2) * 100
    width: function () {
      return ((this.item.value / this.total).toFixed(2) * 100) || 0
    }
  },
  watch: {
    'item.value' () {
      setTimeout(() => {
        gsap.to(this.$refs.progressBarInner, {
          duration: 1.5,
          width: this.width + '%',
          onComplete: () => {
            console.log('动画完成')
          }
        })
      }, 0)
    }
  },
  mounted () {
    setTimeout(() => {
      gsap.to(this.$refs.progressBarInner, {
        duration: 1.5,
        width: this.width + '%',
        onComplete: () => {
          console.log('动画完成')
        }
      })
    }, 1000)
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.progressBarBody {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
  width: calc(100% - 0px);

  .Num {
    font-size: 14px;
    font-family: DIN-Bold, DIN;
    font-weight: bold;
    color: #FFFFFF;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    span {
      margin-right: 6px;
    }
  }

  .progressBarBodyTitle {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #B8CCFF;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    .progressBarBodyTitler {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      span {
        font-size: 16px;
        font-family: DIN;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }

  .progressBar {
    width: 100%;
    height: 4px;
    background: linear-gradient(180deg, rgba(#04CEF7, 0.2) 0%, rgba(#1263FF, 0.2) 100%);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    position: relative;
  }
}

.progressBarInner {
  height: 4px;
  background: linear-gradient(180deg, #04CEF7 0%, #1263FF 100%);
  opacity: 1;
  width: 0%;
  max-width: calc(100% - 0px);
}

.progressBarl {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}
.progressBarBodyTitle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}
</style>
